<template>
    <view class="container" >
        <!-- 房源基本信息 -->
        <view class="house-info">
            <view class="title">房源地址</view>
            <!-- <view class="contact">
                <text>联系人：{{FYInfo.concatName}}</text>
                <text>电话：{{FYInfo.concatPhone}}</text>
            </view> -->
            <view class="address">
                名称：{{FYInfo.destName}}
            </view>
            <view class="address">{{FYInfo.destAddress}}</view>
        </view>

        <!-- 地图组件 -->
        <view class="map-container">
            <!-- #ifdef H5 || APP-PLUS -->
            <view class="title">导航到这里</view>
            <div class="nav_btns">
                <button class="nav-btn" @tap="openH5LocationSelector('baidu')">打开百度地图</button>
                <button class="nav-btn" @tap="openH5LocationSelector('gaode')">打开高德地图</button>
            </div>
            <!-- #endif -->

            <!-- #ifdef MP-ALIPAY -->
            <map
                class="map"
                :latitude="FYInfo.destLat"
                :longitude="FYInfo.destLon"
                :markers="[{
                    id: 1,
                    latitude: FYInfo.destLat,
                    longitude: FYInfo.destLon,
                    title: FYInfo.destName + FYInfo.subDestName
                }]"
                show-location
            ></map>
            <button class="nav-btn" @tap="openLocation">导航到这里</button>
            <!-- #endif -->
        </view>

        <!-- 房源图片 -->
        <view class="media-section" v-if="FYInfo.imgList && FYInfo.imgList.length">
            <view class="section-title">房源图片</view>
            <scroll-view class="image-scroll" scroll-x>
                <view class="image-container">
                    <image
                        v-for="(i, idx) in FYInfo.imgList"
                        :key="i"
                        :src="i"
                        mode="aspectFill"
                        @tap="previewImage(idx)"
                    ></image>
                </view>
            </scroll-view>
        </view>

        <!-- 房源视频 -->
        <view v-show="!showCoverView" class="media-section"
            v-if="FYInfo.videoList && FYInfo.videoList.length">
            <view class="section-title">房源视频</view>
            <video
                v-for="i in FYInfo.videoList"
                class="house-video"
                :src="i"
                controls
            ></video>
        </view>

        <uni-popup ref="selectNavLocationRef" type="bottom"  @change="onPopupChange">
            <view class="map_btn">
                <view @click="openH5LocationSelector('baidu')">百度</view>
                <!-- <view @click="openH5LocationSelector('tengxun')">腾讯</view> -->
                <view @click="openH5LocationSelector('gaode')">高德</view>
            </view>
        </uni-popup>
    </view>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue"
import { getDestInfoByOrder } from '@/api/order'
import { onLoad } from "@dcloudio/uni-app"
import interact from "@/utils/interact"
import { qqMapTransBMap } from '@/utils/location.js'


let orderNo = ''
onLoad((options: any) => {
    orderNo = options.orderNo
    getFYInfo()
})


const FYInfo = ref<any>({})
const getFYInfo = () => {
    getDestInfoByOrder({
        orderNo
    }).then(res => {
        let destInfo = res.data &&res.data[0] || {}
        destInfo.imgList = destInfo.destImg.split(',')
        destInfo.videoList = destInfo.destVideo.split(',')
        FYInfo.value = destInfo
    }, err => {
        interact.modal(err.msg).then(() => {
            uni.navigateBack()
        })
    })
}

const onPopupChange = (e: {show: boolean, type: string}) => {
    showCoverView.value = e.show
}
const showCoverView = ref(false)
const selectNavLocationRef = ref()
const openH5LocationSelector = (type: string) => {
    console.log('22222222');

    if(type == 'open') {
        selectNavLocationRef.value.open()
    } else if(type == 'baidu') {
        // let bdLocation = qqMapTransBMap(FYInfo.value.destLon, FYInfo.value.destLat)
        // console.log(bdLocation);
        // location.href = `http://api.map.baidu.com/geocoder?location=${bdLocation.lat},${bdLocation.lng}&coord_type=gcj02&output=html&src=webapp.baidu.openAPIdemo`

        // #ifdef H5
        location.href = `http://api.map.baidu.com/geocoder?location=${FYInfo.value.destLat},${FYInfo.value.destLon}&coord_type=gcj02&output=html&src=webapp.baidu.openAPIdemo`
        selectNavLocationRef.value.close()
        // #endif

        // #ifdef APP-PLUS
        appOpenUrl(
            `baidumap://map/marker?location=${FYInfo.value.destLat},${FYInfo.value.destLon}&title=${FYInfo.value.destName}&coord_type=gcj02&src=andr.baidu.openAPIdemo`,
            `http://api.map.baidu.com/geocoder?location=${FYInfo.value.destLat},${FYInfo.value.destLon}&coord_type=gcj02&output=html&src=webapp.baidu.openAPIdemo`
         )
        selectNavLocationRef.value.close()
        // #endif

    } else if(type == 'tengxun') {
        location.href = `https://apis.map.qq.com/uri/v1/marker?marker=coord:${FYInfo.value.destLat},${FYInfo.value.destLon};title:${FYInfo.value.destName};addr:${FYInfo.value.destAddress}&referer=myapp`
        selectNavLocationRef.value.close()
    } else if(type == 'gaode') {
        // #ifdef H5
        location.href = `https://uri.amap.com/marker?position=${FYInfo.value.destLon},${FYInfo.value.destLat}&name=${FYInfo.value.destName}`
        selectNavLocationRef.value.close()
        // #endif

        // #ifdef APP-PLUS
        appOpenUrl(
            `androidamap://viewMap?sourceApplication=appname&poiname=${FYInfo.value.destName}&lat=${FYInfo.value.destLat}&lon=${FYInfo.value.destLon}&dev=0`,
            `https://uri.amap.com/marker?position=${FYInfo.value.destLon},${FYInfo.value.destLat}&name=${FYInfo.value.destName}`
        )
        selectNavLocationRef.value.close()
        // #endif
    }
}




const appOpenUrl = (aurl: string, iosUrl: string) => {
    uni.navigateTo({
        url: `/pages/webview/webview?path=${encodeURIComponent(encodeURIComponent(iosUrl))}`
    })
    return
    // if(plus.os.name == 'Android') {
    //     plus.runtime.openURL(aurl, (err) => {
    //         uni.showModal({
    //             title: '提示',
    //             // content: JSON.stringify(err),
    //             content: '检测到您本机暂未安装导航应用，请先安装APP。',
    //             showCancel: false,
    //             success: function(res) {
    //                 console.log('成功')
    //             }
    //         });
    //     });
    // }

    // if(plus.os.name == 'iOS') {
    //     uni.navigateTo({
    //         url: `/pages/webview/webview?path=${encodeURIComponent(encodeURIComponent(iosUrl))}`
    //     })
    // }
}


// const openNavigation = (longitude, latitude, i, name) {
//     let url = ""; // app url
//     // 判断用户选择的地图
//     switch (i) {
//         // 下面是拼接url,不同系统以及不同地图都有不同的拼接字段
//         case 1: // 打开高德地图
//             url = `androidamap://viewMap?sourceApplication=appname&poiname=${name}&lat=${latitude}&lon=${longitude}&dev=0`;
//             break;
//         case 2: // 打开百度地图
//             url = `baidumap://map/marker?location=${latitude},${longitude}&title=${name}&coord_type=gcj02&src=andr.baidu.openAPIdemo`;
//             break;
//     }
//     // 如果选中
//     if (url != "") {
//         url = encodeURI(url);
//         // 打开 app 导航

//     }
// }



// 打开导航
const openLocation = () => {
    // #ifndef H5
    uni.openLocation({
        latitude: FYInfo.value.destLat,
        longitude: FYInfo.value.destLon,
        name: FYInfo.value.destName ,
        address: FYInfo.value.destAddress,
        success: () => {
            console.log('导航打开成功')
        }
    })
    // #endif
}

// 预览图片
const previewImage = (index: number) => {
    uni.previewImage({
        current: index,
        urls: [FYInfo.value.imgList]
    })
}
</script>

<style lang="scss" scoped>
.container {
    padding: 20rpx;
    background-color: #f8f8f8;
}

.house-info {
    background-color: #fff;
    padding: 30rpx;
    border-radius: 12rpx;
    margin-bottom: 20rpx;

    .title {
        font-size: 32rpx;
        font-weight: bold;
        margin-bottom: 20rpx;
    }

    .address {
        font-size: 28rpx;
        color: #333;
        margin-bottom: 20rpx;
    }

    .contact {
        display: flex;
        justify-content: space-between;
        font-size: 26rpx;
        color: #666;
    }
}

.map-container {
    position: relative;
    width: 100%;
    // #ifdef H5 || APP-PLUS
    height: 160rpx;
    // #endif
    // #ifdef MP-ALIPAY
    height: 500rpx;
    // #endif
    margin-bottom: 20rpx;
    border-radius: 12rpx;
    overflow: hidden;



    .map {
        width: 100%;
        height: 100%;
    }


    .nav-btn {
        position: absolute;
        bottom: 30rpx;
        left: 50%;
        transform: translateX(-50%);
        background-color: #1890ff;
        color: #fff;
        padding: 0 40rpx;
        border-radius: 40rpx;
        font-size: 28rpx;
    }

    .title{
        font-size: 32rpx;
        font-weight: bold;
        margin-bottom: 40rpx;
        padding-left: 20rpx;
    }
    .nav_btns{
        display: flex;
        justify-content: space-around;
        .nav-btn{
            position: relative;
            left: 0;
            transform: translateX(0);
            bottom: 0;
        }

    }
}

.media-section {
    background-color: #fff;
    padding: 30rpx;
    border-radius: 12rpx;
    margin-bottom: 20rpx;

    .section-title {
        font-size: 32rpx;
        font-weight: bold;
        margin-bottom: 20rpx;
    }

    .image-scroll {
        width: 100%;
        white-space: nowrap;

        .image-container {
            display: inline-block;

            image {
                width: 240rpx;
                height: 240rpx;
                margin-right: 20rpx;
                border-radius: 8rpx;
                display: inline-block;
            }
        }
    }

    .house-video {
        width: 100%;
        height: 400rpx;
        border-radius: 8rpx;
        background-color: #000;
        margin-bottom: 20rpx;
    }
}

.map_btn{
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    z-index: 999;
    view, cover-view{
        width: 700rpx;
        height: 80rpx;
        line-height: 80rpx;
        background-color: #fff;
        color: #333;
        border-radius: 10rpx;
        font-size: 28rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 10rpx;
        text-align: center;
    }
}


.popup-mask{
    position: fixed;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 999;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    // padding-bottom: 50rpx;
    box-sizing: border-box;
    color: #fff;
}
</style>
